<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <p v-cloak v-once >msg:{{str+btnStr}}</p>
        <div v-pre>
            <p v-text="str"></p>
            <p v-html="str"></p>
        </div> 
            <input type="button" v-bind:value="btnStr+'吧'" v-on:click="show01">
            <hr />
         <p v-if="isShow">显示</p>
    </div>
</body>

</html>
<script src="./js/vue2.js"></script>
<script>

    // 体会到vue做了什么：
    // 1、把数据显示在页面上(dom操作：修改标签的内容，属性等等)，在vue中叫：声明式渲染。也叫数据绑定（在界面上使用了数据）
    // 2、数据变了后，界面跟着变化。这叫数据驱动（用数据驱动视图的变化），也叫响应式渲染。

    let vm = new Vue({
        el: "#app",
        data: {
            str: "hello",
            btnStr: "显示",
            isShow: true
        },
        methods: {
            show01() {
                this.str += "1";
                this.isShow = !this.isShow;
            }
        }
    });

</script>